<template>
    <!-- 仪表盘 -->
    <div class="dashboard" ref="dashboard">
        <canvas ref="canvas" class="dashboard-canvas"></canvas>
    </div>
</template>

<script>
export default {
    data() {
        return {
            canvas:null,
            ctx:null,
            targetValue: 0.6,  // 目标值
            currentValue: 0.6,  // 当前值
        }
    },
    props:{
        value:{
            type:Number,
            default:0
        },
        text:{
            type:String,
            default:''
        }
    },
    mounted() {
        this.canvas = this.$refs['canvas'];
        this.canvas.width = this.$refs['dashboard'].clientWidth;
        this.canvas.height = this.$refs['dashboard'].clientHeight;
        this.ctx = this.canvas.getContext('2d');
        this.targetValue = this.value;  // 目标值
        this.currentValue = this.value;  // 当前值
        this.animateGauge(); 
    },
    watch:{
        value(newVal){
            this.targetValue = newVal;  // 更新目标值
            this.animateGauge(); 
        }
    },
    methods: {
        animateGauge() {
            const animate = () => {
                // 计算当前值和目标值之间的差
                const difference = this.targetValue - this.currentValue;
                
                // 如果差值很小 就停止动画
                if (Math.abs(difference) < 0.01) {
                    this.currentValue = this.targetValue; // 确保当前值等于目标值
                    this.drawGauge(this.currentValue); // 绘制最终状态
                    return;
                }

                // 平滑过渡
                this.currentValue += difference * 0.1; // 动画速度
                this.drawGauge(this.currentValue);
                requestAnimationFrame(animate);
            };
            requestAnimationFrame(animate);
        },
        drawGauge(value){
            const ctx = this.ctx;
            const canvas = this.canvas;
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = Math.min(centerX, centerY) - 20;  // 半径
            const lineWidth = radius / 8;  // 线宽
            const startAngle = Math.PI;   // 起始角度（左侧）
            const endAngle = startAngle + Math.PI * value; // 动态结束角度
            
            // 绘制灰色背景弧
            const gradientBackground = ctx.createLinearGradient(centerX, centerY - radius, centerX, centerY + radius);
            gradientBackground.addColorStop(0, '#65666b');
            gradientBackground.addColorStop(1, '#65666b');

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, 2 * Math.PI, false);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = gradientBackground;
            ctx.stroke();

            // 绘制红色进度弧
            const gradientProgress = ctx.createLinearGradient(centerX - radius, centerY, centerX + radius, centerY);
            gradientProgress.addColorStop(0, '#712639');
            gradientProgress.addColorStop(1, '#ff7f7f');

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = gradientProgress;
            ctx.stroke();

            // 绘制指针
            const angle = startAngle + Math.PI * value; // 动态角度
            const pointerWidth = radius / 25; // 指针大小比例
            const pointerLength = radius * 0.8;  // 指针长度

            ctx.beginPath();
            ctx.moveTo(centerX, centerY + 3);
            ctx.lineTo(
                centerX + pointerWidth * Math.cos(angle - Math.PI / 5),
                centerY + pointerWidth * Math.sin(angle - Math.PI / 5)
            );
            ctx.lineTo(
                centerX + pointerLength * Math.cos(angle),
                centerY + pointerLength * Math.sin(angle)
            );
            ctx.lineTo(
                centerX + pointerWidth * Math.cos(angle + Math.PI / 5),
                centerY + pointerWidth * Math.sin(angle + Math.PI / 5)
            );
            ctx.closePath();
            ctx.fillStyle = '#eb6067';
            ctx.fill();

            // 指针底部的圆
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius / 20, 0, 2 * Math.PI); 
            ctx.fillStyle = '#eb6067';
            ctx.fill();

            // 绘制文字
            // ctx.fillStyle = '#fff';
            // ctx.font = `${radius / 6}px Arial`;
            // ctx.textAlign = 'center';
            // ctx.fillText(this.text, centerX, centerY + radius / 3);
        }
    },
}
</script>

<style lang="scss" scoped>
.dashboard{
    width: 568px;
    height: 412px;
}
</style>